<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多样海量图</title>
</head>
<style>
    html,body,#container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        right: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 13px;
    }
</style>
<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&key=9a621a769237615e36fe158651cc8e1f'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<body>
	 <div id="container"></div>
    
	 <script type="text/javascript">
		 //创建地图
	    var map = new AMap.Map('container');
		
        //绘制海量点
        AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
        	  //判断Canvas
	           if (!PointSimplifier.supportCanvas) {
	               alert('当前环境不支持 Canvas！');
	               return;
	           }
               
               //绘制海量点实例化对象
	           
				var pointSimplifierIns = new PointSimplifier({
					map: map, //所属的地图实例
					getPosition: function(item) {
						if (!item) {
							return null;
						}
						//var parts = item.split(',');
						//返回经纬度
						return item;
					},
					getHoverTitle: function(dataItem, idx) {
						return idx + ': ' + dataItem;
					},
					renderOptions: {
						//点的样式
						pointStyle: {
							width: 12,
							height: 12,
							content:PointSimplifier.Render.Canvas.getImageContent(
							'./1.png',
							function onload() {
								pointSimplifierIns.renderLater();
							},
							function onerror(e) {
								alert('图片加载失败！');
							})
						},
						//鼠标hover时的title信息
						hoverTitleStyle: {
							position: 'top'
						}
					}
				});
				
				var pointSimplifierIns_two = new PointSimplifier({
					map: map, //所属的地图实例
					getPosition: function(item) {
						if (!item) {
							return null;
						}
						//var parts = item.split(',');
						//返回经纬度
						return item;
					},
					getHoverTitle: function(dataItem, idx) {
						return idx + ': ' + dataItem;
					},
					renderOptions: {
						//点的样式
						pointStyle: {
							width: 12,
							height: 12,
							content:PointSimplifier.Render.Canvas.getImageContent(
							'./2.png',
							function onload() {
								pointSimplifierIns.renderLater();
							},
							function onerror(e) {
								alert('图片加载失败！');
							})
						},
						//鼠标hover时的title信息
						hoverTitleStyle: {
							position: 'top'
						}
					}
				});
				
               //暴露全局
	           window.pointSimplifierIns = pointSimplifierIns;
	           window.pointSimplifierIns_two = pointSimplifierIns_two;
               //事件的添加
	           pointSimplifierIns.on('pointClick', function(e, record) {
				   pointSimplifierIns.setData(null);
				   
				   map.setCenter(new AMap.LngLat(record.data[0],record.data[1]))
				   map.setZoom(8);
				   map.setFitView();
	           });
			   
			   pointSimplifierIns_two.on('pointClick', function(e, record) {
				   console.log(record);
				   pointSimplifierIns.setData(data1_posi);
				   
				   map.setCenter(new AMap.LngLat(record.data[0],record.data[1]))
				   map.setZoom(8);
				   map.setFitView();
	           });
			   
			    var data1_id=[];
				var data1_posi=[];
		
				for(var i=0;i<provinces.length;i++){
					data1_id[i]={};
					data1_id[i].name=provinces[i].name;
					data1_posi[i]=[];
					data1_posi[i][0]=provinces[i].center.split(",")[0];
					data1_posi[i][1]=provinces[i].center.split(",")[1];
				}
			
			
				var data2_id=[];
				var data2_posi=[];
				for(var i=0;i<provinces2.length;i++){
					data2_id[i]={};
					data2_id[i].name=provinces2[i].name;
					data2_posi[i]=[];
					data2_posi[i][0]=provinces2[i].center.split(",")[0];
					data2_posi[i][1]=provinces2[i].center.split(",")[1];
				}


	           pointSimplifierIns.setData(data1_posi);
	           pointSimplifierIns_two.setData(data2_posi);
			   
			    map.setZoom(4);
				map.setFitView();
        });
	
			
		

	 </script>
</body>
</html>